{% extends 'template/base.html' %}

{% block head %}
    {{ super  () }}
    <title>订单列表</title>
{% endblock %}
{% block body %}

    {% include 'template/admin-header.html' %}
    <style>
        .container {
            margin-top: 40px;
        {#display: flex;#}{#flex-direction: row;#}{#justify-content: center;#}
        }

        .orders {
            display: flex;
            flex-direction: column;
        }

        .orders .item {
            display: flex;
            flex-direction: column;
            border: 1px solid #ddd;
            margin: 10px 10px 10px 0;
            transition: all 200ms;
        }

        .orders .item:hover {
            border: 1px solid #bbb;
            transition: all 200ms;
        }

        .orders .item .top {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 10px 20px;
            background: #f1f1f1;
        }

        .orders .item .top .time {
            margin-right: 30px;
        }

        .orders .item .content {
            display: flex;
            flex-direction: row;
            padding: 10px 20px;
        {#height: 40px;#}
        }

        .orders .item .content img {
            width: 80px;
            height: 80px;
            margin-right: 10px;
        }

        .orders .item .content .pd-name {
            width: 350px;
            text-align: left;
            margin-right: 100px;
        }

        .orders .item .sub-content {
            display: flex;
            flex-grow: 2;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
        }


    </style>

    <div class="container">

        <div class="text-left" style="margin-bottom: 30px">
            <form class="form-inline" method="get">
                <input type="text" class="form-control" placeholder="输入相关商品名" name="k"
                       value="{{ request.args.k | d('', true) }}">
                <button type="submit" class="btn btn-primary">搜索订单</button>
            </form>
        </div>

        {% if request.args.k %}
            <div style="text-align: left;color: #666;font-size: 18px">为您找到关于 “ {{ request.args.k }} ” 的订单：</div>
        {% else %}
            <div style="text-align: left;color: #666;font-size: 18px">全部订单：</div>
        {% endif %}

        {% if orders | length == 0 %}
            <div style="margin-top: 30px;color: red;font-size: 20px">没有相关订单</div>
        {% endif %}

        <div class="orders">
            {% for order in orders | sort(attribute='create_time', reverse=true) %}

                <div class="item">
                    <div class="top">
                        <div class="time">{{ order.create_time }}</div>
                        <div class="order-id">订单号：<a class="pd-name"
                                                     href="{{ url_for('admin.order_detail_ep', order_id=order.id) }}">{{ order.id }}</a>
                        </div>
                    </div>
                    <div class="content">
                        <img src="{{ url_for('static', filename='upload/' + order.product_img) }}" alt="">
                        <a class="pd-name"
                           href="{{ url_for('admin.order_detail_ep', order_id=order.id) }}">{{ order.product_name }}</a>

                        <div class="sub-content">

                            <div class="text-danger" style="min-width: 100px;">
                                ￥{{ order.total_price }}
                                <br> ￥{{ order.single_price }} × {{ order.count }}
                            </div>

                            {% if order.status == 0 %}
                                <div>买家未付款</div>
                            {% endif %}

                            {% if order.status == 1 %}
                                <div>
                                    <div>待发货</div>
                                    <button type="button" class="btn btn-success send-package-btn" data-toggle="modal"
                                            data-order_id="{{ order.id }}"
                                            data-target=".bs-example-modal-sm">
                                        立即发货
                                    </button>

                                </div>
                            {% endif %}

                            {% if order.status == 2 %}
                                <div>等待用户签收</div>
                            {% endif %}

                            {% if order.status == 3 %}
                                <div class="text-success">交易成功</div>
                            {% endif %}

                            {% if order.status == 4 %}
                                <div>
                                    <div>买家申请退款</div>
                                    <form action="{{ url_for('admin.order_allow_cancel_ep') }}"
                                          onclick="return confirm('确定同意吗？')" method="post">
                                        <input type="text" hidden name="order_id" value="{{ order.id }}">
                                        <button class="btn btn-success">同意退款</button>
                                    </form>
                                </div>
                            {% endif %}

                            {% if order.status == 5 %}
                                <div>订单已取消</div>
                            {% endif %}

                        </div>

                    </div>
                </div>

            {% endfor %}
        </div>

        {% include 'template/pagination.html' %}
    </div>


    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
         aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document" style="margin-top: 40vh;">
            <div class="modal-content" style="width: 400px;">

                <form style="margin: 40px 80px;" method="post" action="{{ url_for('admin.order_send_package_ep') }}">

                    <input type="text" hidden name="order_id">

                    <input type="number" class="form-control" name="package_code" placeholder="输入快递单号">

                    <button style="margin-top: 20px" type="submit" class="btn btn-block btn-success">确认发货</button>

                </form>

            </div>
        </div>
    </div>


    <script>
      $(function () {
        $('.send-package-btn').on('click', function () {
          const order_id = $(this).data().order_id
          $('input[name=order_id]').attr('value', order_id)
        })
      })

    </script>
{% endblock %}